<script setup lang="ts">
import { useGlobalStorage } from '@/stores/global.ts'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

const globalStorage = useGlobalStorage()
// 响应式窗口尺寸
const { width } = useWindowSize()
const showMenu = computed(() => globalStorage.visibleMessage)

</script>

<template>
  <div class="menu-bar" v-show=" width > 640 || (!showMenu && width <= 640) ">
    <!--工具栏 1.消息按钮 2.用户按钮-->
    <div class="menu-bar-tool">
      <!--消息-->
      <router-link exactActiveClass="tool-icon-active" to="/chat">
        <el-badge :value="1" :max="99">
          <IconFont icon="message" :size="28" class="menu-bar-icon" />
        </el-badge>
      </router-link>

      <!--联系人按钮-->
      <router-link exactActiveClass="tool-icon-active" to="/chat/contact">
        <el-badge :value="1" :max="99">
          <IconFont icon="contact" :size="28" class="menu-bar-icon" />
        </el-badge>
      </router-link>

      <!-- 朋友圈-->
      <router-link exactActiveClass="tool-icon-active" to="/chat/WechatMoment">
        <el-badge :value="1" :max="99">
          <IconFont icon="friend" :size="28" class="menu-bar-icon" />
        </el-badge>
      </router-link>
      <!--设置-->
      <router-link exactActiveClass="tool-icon-active" to="/chat/setting">
        <IconFont icon="setting" :size="28" class="menu-bar-icon" />
      </router-link>
    </div>
  </div>
</template>

<style scoped lang="scss" src="./styles.scss"></style>
